<template>
  <div id="top">

      <div class="topboxx">
        <!--蓝色矩形-->
        <div class="topbox"></div>  
      </div>

        <div class="text1qw">
            <p>签约详情</p>
        </div>
        <div class="topbox2">
            <div class="p1box">
                <p class="p1">居民信息</p>
            </div>
        </div>

    

    <div class="tabbb1">
            <table height="160px" >
                <tr align="center">
                        <td colspan="2" width="30px"></td>
                        <td><font style="color: gray;">姓名</font></td>
                        <td><font style="color: blue;">{{list.user_name}}</font></td>
                        <td colspan="2" width="100px"></td>
                        <td ><font style="color: gray;">身份证号</font></td>
                        <td>&nbsp;&nbsp;&nbsp;<font>{{list.user_cardId}}</font></td>
                        <td colspan="2" width="100px"></td>
                        <td ><font style="color: gray;">性别</font></td>
                        <td >&nbsp;&nbsp;<font>{{list.user_sex==1?"男":"女"}}</font></td>
                        <td colspan="2" width="100px"></td>
                        <td ><font style="color: gray;">年龄</font></td>
                        <td >&nbsp;&nbsp;<font>{{list.user_age}}</font></td>
                    </tr>
                    <tr align="center">
                        <td colspan="2" width="30px"></td>
                        <td><font style="color: gray;">联系电话</font></td>
                        <td><font >&nbsp;&nbsp;{{list.user_phone}}</font></td>
                        <td colspan="2" width="100px"></td>
                        <td ><font style="color: gray;">现居住</font></td>
                        <td>&nbsp;&nbsp;&nbsp;<font>{{list.user_area}}</font></td>
                        <td colspan="2" width="100px"></td>
                        <td ><font style="color: gray;">居民标签</font></td>
                        <td >
                            <el-tag>高血压</el-tag>
                            <el-tag type="success">冠心病</el-tag>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" width="30px"></td>
                        <td><font style="color: gray;">家庭成员</font></td>
                    </tr>
            </table>
            <div class="table120">
                <div class="img1">
                   <img src="http://localhost:8080/u5911.png" width="90px" height="75px"/>
                </div>
                <div class="aaa1">
                    <table>
                        <tr>
                            <td><b>王琳</b></td>
                            <td><font style="color: gray;">&nbsp;&nbsp;&nbsp;28岁</font></td>
                        </tr>
                        <tr>
                            <td><font style="color: gray;">关系</font></td>
                            <td><font style="color: gray;">&nbsp;&nbsp;&nbsp;夫妻</font></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="table222">
                <div class="img122">
                    <img src="http://localhost:8080/u5911.png" width="90px" height="75px"/>
                </div>
                <div class="aaa222">
                    <table>
                        <tr>
                            <td><b>张琳</b></td>
                            <td><font style="color: gray;">&nbsp;&nbsp;&nbsp;18岁</font></td>
                        </tr>
                        <tr>
                            <td><font style="color: gray;">关系</font></td>
                            <td><font style="color: gray;">&nbsp;&nbsp;&nbsp;儿女</font></td>
                        </tr>
                    </table>
                </div>
            </div>
    </div>
    <div class="topbox2">
            <div class="p1box1">
                <p class="p1">签约信息</p>
            </div>
        <div class="aaa3">
            <table height="200px" width="1050px">
                <tr align="center">
                        <td colspan="2" width="30px"></td>
                        <td><font style="color: gray;">签约编号</font></td>
                        <td><font >{{list.user_id}}</font></td>
      
                        <td ><font style="color: gray;">签约状态</font></td>
                        <td>
                            <font :style={color:stateColor1}>
                              {{list.contract_state==4 ?"生效中":"已过期"}}   
                            </font> 
                        </td>
                   
                        <td ><font style="color: gray;">签约机构</font></td>
                        <td >&nbsp;&nbsp;<font>
                            {{list.sign_organization==1 ?"罗西社区服务中心":(list.serve_state =="2"?"天明社区服务中心":"民进社区服务中心")}}
                        </font></td>
 
                        <td ><font style="color: gray;">签约团队</font></td>
                        <td >&nbsp;&nbsp;<font>
                            {{list.sign_team==1 ?"A团队":(list.serve_state =="2"?"B团队":"C团队")}}
                        </font></td>
                    </tr>
                    <tr align="center">
                        <td colspan="2" width="30px"></td>
                        <td><font style="color: gray;">签约医生</font></td>
                        <td><font >田浩华</font></td>

                        <td ><font style="color: gray;">服务包</font></td>
                        <td>&nbsp;&nbsp;&nbsp;<font>{{list.serveName}}</font></td>
 
                        <td ><font style="color: gray;">签约周期</font></td>
                        <td >&nbsp;&nbsp;<font>{{list.user_week}}</font></td>

                        <td ><font style="color: gray;">费用</font></td>
                        <td >&nbsp;&nbsp;<font>{{list.user_price}}</font></td>
                    </tr>
                    <tr align="center">
                        <td colspan="2" width="30px"></td>
                        <td><font style="color: gray;">签约类型</font></td>
                        <td><font >首次签约</font></td>

                        <td ><font style="color: gray;">申请时间</font></td>
                        <td>&nbsp;&nbsp;&nbsp;<font>{{list.contract_date}}</font></td>

                        <td ><font style="color: gray;">生效时间</font></td>
                        <td >&nbsp;&nbsp;<font>{{list.contract_date}}</font></td>
                        
                        <td ><font style="color: gray;">到期时间</font></td>
                        <td >&nbsp;&nbsp;<font>{{ list.contract_date }}</font></td>
                    </tr>
                    <tr align="center">
                        <td colspan="2" width="30px"></td>
                        <td><font style="color: gray;">审核人</font></td>
                        <td><font >杨林楠</font></td>

                        <td ><font style="color: gray;">审核时间</font></td>
                        <td>&nbsp;&nbsp;&nbsp;<font>2022-10-12</font></td>

                        <td ><font style="color: gray;">支付时间</font></td>
                        <td >&nbsp;&nbsp;<font>2022-10-05</font></td>
                        
                        <td ><font style="color: gray;">支付方式</font></td>
                        <td >&nbsp;&nbsp;<font>微信</font></td>
                    </tr>
                    <tr align="center">
                        <td colspan="2" width="30px"></td>
                        <td><font style="color: gray;">签约备注</font></td>
                        <td><font>无</font></td>
                    </tr>
            </table>
      </div>
    </div>
    
    <div class="flowbtn">
        <template v-if="twoztt==4">
            <el-button
                plain
                type="primary"
                @click="xuyue">
                续约
            </el-button>
            <router-link to="/sign02">
                <el-button>返回</el-button>
            </router-link>
        </template>

        <template v-if="twoztt==5">
            <router-link to="/sign02">
                <el-button>返回</el-button>
            </router-link>
        </template>
    </div>



  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL = "http://localhost:8080";
export default {
    data(){
        return{
          list:[],
          stateColor1:"blue",
          twoztt:""
        }
    },
    created () {
        this.selectById();
        document.querySelector('body').setAttribute('style', 'background-color:#F2F7FB');
        this.twoztt=this.$route.query.contract_state
    },
    methods: {
        selectById(){
            axios({
                url: "/sign/getSignById2",
                method: "GET",
                params:{
                    id:this.$route.query.id
                }
            }).then((res) => {
                this.list = res.data; //把值传到list里面
                // console.log(this.list);
                this.twoztt=res.data.contract_state
                if(res.data.contract_state==1){
                    this.stateColor1="blue"
                }else if(res.data.contract_state==2){
                    this.stateColor1="grey"
                }
            });
        },
        xuyue(){
             this.$message.success('续约成功')
        }
    }
}
</script>

<style>
*{
    padding: 0;
    margin: 0;
}
#top{
    width: 1150px;
    height: 750px;
     background: white;
    margin: 20px auto;
    position: relative;
}
.table120{
    width: 200px;
    height: 80px;
    background-color: white;
    float: left;
    margin-left: 130px;
    margin-top: -40px;
    border-radius: 5px;
    border: 1px solid gainsboro;
}
.topbox{
    border-width: 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 6px;
    height: 20px;
    background: inherit;
    background-color: rgba(41, 132, 248, 1);
    border: none;
    border-radius: 8px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.topboxx{
    border-width: 0px;
    position: absolute;
    left: 40px;
    top: 42px;
    width: 6px;
    height: 20px;
}
.text1qw{
    position: absolute;
    left: 55px;
    top: 43px;
    font-size: 18px;
}
.topbox2{
    position:absolute;
    top: 80px;
    left: 40px;
}
.p1box{
    margin-top: 40px;
}
.p1box1{
    margin-top: 320px;
}
.tabbb1 {
  position: relative;
  top: 170px;
}
.table1{
    width: 200px;
    height: 80px;
    background-color: white;
    float: left;
    margin-left: 130px;
    margin-top: -40px;
    border-radius: 5px;
    border: 1px solid gainsboro;
}
.table222{
    width: 200px;
    height: 80px;
    background-color: white;
    float: left;
    margin-left: 10px;
    margin-top: -40px;
    border-radius: 5px;
    border: 1px solid gainsboro;
}
.img122{
    height: 80px;
    width: 100px;

    border-radius: 5px;
}
.aaa1{
    position: absolute;
    left: 230px;
    top: 140px;
}
.aaa222{
    position: absolute;
    left: 450px;
    top: 140px;
}
.aaa3{
    position: absolute;
    top: 370px;
}
.flowbtn{
    position: absolute;
    top: 700px;
    left: 50px;
}
</style>